<!-- src/cmps/base/text/JsText.vue -->
<template>
  <span
    :class="['js-text', type ? `js-text--${type}` : '']"
    :style="{ fontSize: fontSize, color: color }"
  >
    {{ text }}
  </span>
</template>

<script setup lang="ts">
defineProps<{
  text: string
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  fontSize?: string
  color?: string
}>()
</script>

<style scoped>
.js-text {
  font-weight: normal;
}

.js-text--primary {
  color: #409EFF;
}

.js-text--success {
  color: #67c23a;
}

.js-text--warning {
  color: #e6a23c;
}

.js-text--danger {
  color: #f56c6c;
}

.js-text--info {
  color: #909399;
}
</style>